<!--
 * @Author: 李振杰
 * @Date: 2025-02-24 16:52:50
 * @LastEditTime: 2025-02-24 17:06:20
 * @LastEditors: @李振杰
 * @Description: 
 * @FilePath: \yikai-page\src\views\supplier\utils\PageBean.vue
 *  
-->
<template>
  <div style="background-color: #fff; height: 50px; line-height: 50px; text-align: right">
    <el-pagination background :page-size="pageSize" :total="total" :current-page="page"
      layout="total, sizes, prev, pager, next, jumper" @size-change="handlePageSizeChange"
      @current-change="handlePageChange" />
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, watch } from 'vue';

// 接收父组件的传参，使用 modelValue 来接收当前页数据
const props = defineProps({
  total: {
    type: Number,
    required: true,
  },
  modelValue: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
});

const emit = defineEmits(['update:modelValue', 'update:pageSize']);

const page = ref(props.modelValue);
const pageSize = ref(props.pageSize);

// 当 pageSize 变化时
const handlePageSizeChange = (size: number) => {
  pageSize.value = size;
  page.value = 1;  // 重置为第一页
  emit('update:pageSize', size);  // 通知父组件更新每页记录数
  emit('update:modelValue', page.value); // 通知父组件更新当前页
};

// 当前页变化时
const handlePageChange = (newPage: number) => {
  page.value = newPage;
  emit('update:modelValue', page.value);  // 通知父组件更新当前页
};

// 监听 props.modelValue，当父组件传入的当前页变化时，更新子组件的页码
watch(() => props.modelValue, (newPage) => {
  page.value = newPage;
});
</script>

<style scoped></style>
